<link rel="stylesheet" type="text/css" href="css/j-tablehtml.css">
<div class="jper-container">
	<div class="jpersonal-page">
		<ul class="jleft-container" id="tab_ul">
			<li class="active" data-types="1">基本信息</li>
			<li data-types="2">修改密码</li>
			<li data-types="3">自定义信息</li>
			<div class="bottom-icon"></div>
		</ul>
		<div class="jright-container">
			<div class="jright-bg">
				<div class="title">
					<div class="title-icon">
						<span class="jttile-left-icon" id="title_text">基本信息</span>
						<span class="jttile-right-icon"></span>
					</div>
				</div>
				<!-- 基本信息 -->
				<div class="jper-content" style="position: relative;" id="info_div">
					<div class="jicon-bj" id="btn_bj">编辑</div>
					<div class="row">
						<div class="jtext-icon jicon-1" id="div_username">-</div>
						<div class="jtext-icon jicon-2" id="div_realname">-</div>
					</div>
					<div class="row-line"></div>
					<div class="row">
						<div class="jtext-icon jicon-3" id="div_email">-</div>
						<div class="jtext-icon jicon-4" id="div_mobile">-</div>
					</div>
					<div class="row-line"></div>
					<div class="row">
						<div class="jtext-icon jicon-5" id="div_unit">-</div>
						<div class="jtext-icon jicon-6" id="div_dept">-</div>
					</div>
					<div class="row-line"></div>
					<div class="row">
						<div class="jtext-icon jicon-7" id="div_position">-</div>
					</div>
					<!-- <div class="row-culine"></div> -->
				</div>
				<!-- 编辑基本信息 -->
				<div class="jper-content" id="info_bj_div">
					<div class="row" style="color: #00FAFF;">
						<div class="jtext-icon jicon-1">用户名</div>
						<div class="jtext-icon jicon-2">姓名</div>
					</div>
					<div class="row-input">
						<input type="text" id="input_username" required>
						<input type="text" id="input_realname" required>
					</div>	
					<div class="row" style="color: #00FAFF;">
						<div class="jtext-icon jicon-3">邮箱</div>
						<div class="jtext-icon jicon-4">电话</div>
					</div>
					<div class="row-input">
						<input type="email" id="input_email" 
							pattern="^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$" required>
						<input type="phone" id="input_mobile" pattern="^1[3456789]\d{9}$" required>
					</div>
					<div class="row" style="color: #00FAFF;">
						<div class="jtext-icon jicon-5">公司</div>
						<div class="jtext-icon jicon-6">部门</div>
					</div>
					<div class="row-input">
						<input type="text" id="input_unit">
						<input type="text" id="input_dept">
					</div>
					<div class="row" style="color: #00FAFF;">
						<div class="jtext-icon jicon-7">职位</div>
					</div>
					<div class="row-input">
						<input type="text" style="flex: inherit; width: 15vw;" id="input_position">
					</div>
					<div class="btn-div">
						<button class="jper-btn-canel" id="bj_btn_cancel">取消</button>
						<button class="jper-btn-ok" id="bj_btn_submit">提交</button>
					</div>
				</div>
				<!-- 修改密码 -->
				<div class="jper-content" id="update_password_div">
					<div class="row" style="color: #00FAFF;">
						<div>原始密码</div>
					</div>
					<div class="row-input password">
						<input type="text" id="input_oldpsd" autocomplete='new-password'>
					</div>	
					<div class="row" style="color: #00FAFF;">
						<div>新密码</div>
					</div>
					<div class="row-input password">
						<input type="text" id="input_newpsd" autocomplete='new-password'>
					</div>
					<div class="row" style="color: #00FAFF;">
						<div>确认密码</div>
					</div>
					<div class="row-input password">
						<input type="text" id="input_newpsd2" autocomplete='new-password'>
					</div>
					<div class="btn-div" style="left:7vw">
						<button class="jper-btn-ok" id="psw_btn_submit">提交</button>
					</div>
				</div>
				<!-- 自定义信息 -->
				<div class="jper-content" id="update_diyinfo_div">
					<div class="row-input password" >
						<input type="text" id="input_diyinfo" style="margin-top:15vh;">
					</div>	
					<div class="btn-div" style="left:15vw;top: 25vh;">
						<button class="jper-btn-ok" id="diyinfo_btn_submit">提交</button>
					</div>
				</div>
			</div>
			
		</div>
	</div>
</div>
<script type="text/javascript" src="js/jdialog-btn.js"></script>
<script type="text/javascript" src="js/system/personal.js"></script>
